<template>
  <div id="R_two">
    <div class="table-container">
      <table class="header-table">
        <thead>
          <tr class="bac">
            <th>序号</th>
            <th style="color: rgb(10,147,198);">水平</th>
            <th style="color: rgb(65,130,216);">垂直</th>
          </tr>
        </thead>
      </table>
      <div class="table-body">
        <table class="content-table">
          <tbody>
            <tr v-for="(alarm, index) in alarms" :key="index">
              <td>{{ index + 1 }}</td>
              <td style="color: rgb(10,147,198);">{{ alarm.报警内容 }}</td>
              <td style="color: rgb(65,130,216);">{{ alarm.支架号 }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      alarms: [
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "水平报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "水平报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "水平报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "水平报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
        { "报警内容": "0.1", "支架号": "-0.1", "报警类型": "垂直报警", "报警时间": "2025-09-09 12:20:23" },
      ]
    };
  }
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  color: white;
}

#R_two {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.table-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-table {
  width: 100%;
  border-collapse: collapse;
}

.table-body {
  max-height: 300px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.table-body::-webkit-scrollbar {
  display: none;
}

.content-table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px 7px;
  font-size: 13px;
  text-align: center;
  width: calc(100% / 3);
}

.bac {
  background-image: url('../../../../assets/Scraper/组 169@1x.png');
  background-size: 100% 100%;
}

th {
  font-size: 15px;
  position: sticky;
  top: 0;
}

tr:nth-child(even) {
  background-color: rgba(6, 34, 82, 0.4);
}

tr:nth-child(odd) {
  background-color: rgba(6, 34, 82, 0.2);
}
</style>
